﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery生成二维码实例</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
    <!--<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../js/hcui.js"></script>
    <script type="text/javascript" src="../js/hcui_au.js"></script>
</head>
<body><div id="qrcode2"></div>
    <br/>
    <div id="qrcode"></div><canvas></canvas>
    <div><a href="javascript:;" onclick="downloadIamge()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加-按入库</a></div>
    <script>
        function newCode(str, info) {
            var qrcode = new QRCode(document.getElementById("qrcode2"), {
                text: info,
                width: 200,
                height: 200
            });
            qrcode.makeCode(str);
        }
       //newCode("http://rv9.hcrain.cn/hsctaskprocess/reviewBackNew.html?codenos=" + getUrlParam("code"), getUrlParam("code"));

        //下载二维码
        function downloadIamge() {
            var imgs = document.getElementById("canvas").getElementsByTagName("img")
            var a = document.createElement('a')
            a.download = 'xds' + new Date().getTime() || '下载图片名称'
            a.href = imgs[0].src
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }



        //jquery-qrcode不支持中文,改变一下编码就支持了！
        function utf16to8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }

        //二维码宽高
        var qrcodewidth = 200;
        var qrcodeheight = 200;
        //canvas宽高
        var canvaswidth = qrcodewidth;
        var canvasheight = qrcodeheight + 100;
        //logo宽高
        var logowidth = 100;
        var logoheight = 100;
        //文字描述位置
        var textleft = qrcodewidth / 2;
        var texttop = qrcodeheight + 70;
        //logo位置
        var logoleft = (qrcodewidth - logowidth) / 2;
        var logotop = (qrcodeheight - logoheight) / 2;

        var qrcode = $('#qrcode').qrcode({
            render: 'canvas',
            text: utf16to8("http://rv9.hcrain.cn/hsctaskprocess/reviewBackNew.html?codenos=" + getUrlParam("code")),
            width: qrcodewidth,
            height: qrcodeheight,
            background: '#ffffff',
            foreground: '#000000',
        });
        var canvas = qrcode.find('canvas').get(0);
        var img = new Image();
        img.src = canvas.toDataURL('image/png');
        img.onload = function () {
            canvas.width = canvaswidth;
            canvas.height = canvasheight;
            var ctx = canvas.getContext('2d');
            //设置画布背景
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //设置文字样式
            ctx.fillStyle = '#000000';
            ctx.font = 'bold ' + 10 + 'px Arial';
            ctx.textAlign = 'center';
            //文字描述
            ctx.fillText("序号"+getUrlParam("code"), textleft, texttop);
            //绘制二维码
            ctx.drawImage(img, 0, 0);
            //设置logo
            var logo = new Image(logowidth, logoheight);
            logo.src = 'assets/img/hui.jpg';
            logo.onload = function () {
                ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
            }

        }
    </script>

</body>
</html>